<div class="row">
  <div class="col-lg-12" align="center">
    <!--    <p class="p7 prompt">存储类型 (StorageClass) 是由集群管理员配置存储服务端参数，并按类型提供存储给集群用户使用</p>-->
    <h6 class="font-title">存储类型</h6>
  </div>
  <div class="clr-col-lg-12">
    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>存储卷数量</clr-dg-column>
      <clr-dg-column>datastore</clr-dg-column>
      <clr-dg-column>供应者</clr-dg-column>
      <clr-dg-row *clrDgItems="let s of storages" [clrDgItem]="s">
        <clr-dg-cell>{{s.name}}</clr-dg-cell>
        <clr-dg-cell>{{s.pvcs.length}}</clr-dg-cell>
        <clr-dg-cell>{{s.datastore}}</clr-dg-cell>
        <clr-dg-cell>{{s.provisioner}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
  <div class="col-lg-12" align="center">
    <h6 class="font-title">存储卷</h6>
  </div>
  <div class="clr-col-lg-12" *ngFor="let s of storages">
    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-column>Namespace</clr-dg-column>
      <clr-dg-column>名称</clr-dg-column>
      <clr-dg-column>容量</clr-dg-column>
      <clr-dg-column>挂载状态</clr-dg-column>
      <clr-dg-column>创建时间</clr-dg-column>
      <clr-dg-row *clrDgItems="let p of s.pvcs" [clrDgItem]="p">
        <clr-dg-cell>{{p.namespace}}</clr-dg-cell>
        <clr-dg-cell>{{p.name}}</clr-dg-cell>
        <clr-dg-cell>{{p.capacity}}</clr-dg-cell>
        <clr-dg-cell>{{p.status}}</clr-dg-cell>
        <clr-dg-cell>{{p.create_time | date: 'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
</div>
